<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="../css/bbs.css" rel="stylesheet">
	<style>
		ul li {
			maargin: top 10px;
		}
		ul li img {
			float: left;
			margin-right: 10px;
			border-radius: 50%;
		}
		ul li p {
			padding-top: 10px;
			margin-bottom: 20px;
		}
		ul>li>div {
			color: #aaa;
		}
		ul li::after{
			content: "";
			clear: both;
			display: block;
		}
	</style>
</head>
<body>
	<button></button>
<div class="bbs">
    <header><span>我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：
		<select>
			<option>请选择版块</option>
			<option>电子书籍</option>
			<option>新课来了</option>
			<option>新手报到</option>
			<option>职业规划</option>
		</select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
<script src="jquery.3.6.3.js"></script>
<script>
	$("header span").click(function(){
		$(".post").show()
	})
	$(".btn").click(function(){
// 		 <img src="images/tou01.jpg">
// 		 <img src="images/tou02.jpg">
// 		 <img src="images/tou03.jpg">
// 		 <img src="images/tou04.jpg">
		let pic = [
			"images/tou01.jpg",
		    "images/tou02.jpg",
		    "images/tou03.jpg",
			"images/tou04.jpg"]
		let r = Math.floor(Math.random()*4)
		let myli = $(
		`<li>
		<img src = "${pic[r]}">
		<p>
		<div>
		所属版块：${$("select").val()}
		</div>
		</p>
		</li>`);
	    $("ul").prepend(myli);
	    $(".title").val("");
		$(".content").val("");
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth()+1;
		let day = date.getDate();
		let hour = date.getHours();
		let minute = date.getMinutes();
		let second =date.getSeconds();
		let time = year+"--"+month+"--"+day+"--"+hour+"："+minute+":"+second;
		$(".post").hide()
	})
</script>
</body>
</html>